/*
 * @Author: xiaosihan 
 * @Date: 2024-10-06 03:49:52 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-06 14:46:50
 */

import { autorun } from "mobx";
import { ReactNode, useEffect, useRef, useState } from "react";
import styles from "./accountInfo.module.less";
import { Button, Form, Input } from "antd";
import factoryStore from "@views/factory/factoryStore";

interface Iprops {
    children?: ReactNode
}

// 账号设置
export default function AccountInfo(props: Iprops) {

    const dom = useRef<HTMLDivElement | null>(null);
    const [form] = Form.useForm();
    const [data, setData] = useState({});

    useEffect(() => {

    }, []);

    useEffect(() => autorun(() => {

    }, { delay: 10 }), []);

    type FieldType = {
        phone?: string;
        email?: string;
        wx_openid?: string;
        realName?: string;
        tel?: string;
    };

    const next = () => {
        form.validateFields()
            .then(async () => {
                factoryStore.setLoginStatus("companyInfo");
            }).catch(err => {
            })
    }


    return (
        <div
            ref={dom}
            className={styles.accountInfo}
        >
            <div className={styles.title}>账号信息</div>
            <div className={styles.subTitle}>请填写真实的个人信息</div>

            <Form
                form={form}
                name="basic"
                labelCol={{ span: 4 }}
                wrapperCol={{ span: 14 }}
                initialValues={{
                    phone: "",
                    email: "",
                    wx_openid: "",
                    realName: "",
                }}
                autoComplete="off"
            >
                <div className={styles.subT} >账号绑定</div>
                <Form.Item<FieldType>
                    label="手机号"
                    rules={[{ required: true }]}
                >
                    <span className={styles.phone} >185****8512</span>
                </Form.Item>

                <Form.Item<FieldType>
                    name="email"
                    label="邮箱账号"
                    rules={[{ required: true, message: '邮箱不能为空' }]}
                >
                    <Input className={styles.input} placeholder="输入邮箱地址" size="large" />
                </Form.Item>

                <Form.Item<FieldType>
                    name="wx_openid"
                    label="绑定微信"
                    rules={[]}
                >
                    <img className={styles.headImg} src="" alt="1" />
                </Form.Item>

                <div className={styles.subT} >联系方式</div>

                <Form.Item<FieldType>
                    name="realName"
                    label="联系人"
                    rules={[{ required: true, message: '联系人不能为空' }]}
                >
                    <Input className={styles.input} placeholder="请输入真实名称" size="large" />
                </Form.Item>

                <Form.Item<FieldType>
                    name="phone"
                    label="手机号码"
                    rules={[{ required: true, pattern: /^1[3-9]\d{9}$/, message: '请输入正确的电话号码' }]}
                >
                    <Input className={styles.input} placeholder="请输入联系电话" size="large" />
                </Form.Item>

                <Form.Item<FieldType>
                    name="tel"
                    label="固定电话"
                    rules={[]}
                >
                    <Input className={styles.input} placeholder="请输入联系电话" size="large" />
                </Form.Item>

            </Form>

            <div className={styles.btns} >
                <Button
                    type="primary"
                    onClick={() => {
                        next();
                    }}
                >&nbsp;下一步&nbsp;</Button>
            </div>

        </div>
    );

}